<template>
  <div class="article-wrapper">
    <el-tabs
      v-model="activeName"
      class="course-d-tabs"
    >
      <el-tab-pane label="章节速览" name="overview">
        <el-timeline
          style="width: 100%"
          v-if="activeName==='overview'"
          >
          <!-- v-loading="autoChapters.length === 0" -->
          <template v-for="item in autoChapters">
            <el-timeline-item
              @click="videoTimeChange(item.Start)"
              color="#585a73"
              :timestamp="millisecondsToTime(item.Start)"
              placement="top"
            >
              <el-card
                style="background-color: var(--el-color-primary-light-9)"
              >
                <h4 style="font-size: 15px; color: var(--el-color-black); font-weight: 450">{{ item.Headline }}</h4>
                <p class="line-height-xl font-size-s margin-top-8">{{ item.Summary }}</p>
              </el-card>
            </el-timeline-item>
          </template>
        </el-timeline>
      </el-tab-pane>
      <el-tab-pane label="发言总结" name="summary">
        <div
          v-if="activeName === 'summary'"
          v-loading="summarization.ConversationalSummary.length === 0"
        >
          <el-card
            v-for="(item, index) in summarization.ConversationalSummary"
            :key="index"
            style="
              margin-bottom: 20px;
              background-color: var(--el-color-primary-light-9);
            "
          >
            <div style="display: flex; justify-content: space-between; gap: 10px">
              <div
                style="
                  display: flex;
                  align-items: center;
                  flex-direction: column;
                  width: 70px;
                  font-size: 12px;
                "
              >
                <text-avatar
                  :text="item.SpeakerId"
                  :width="30"
                  circle
                />
                <span>{{ item.SpeakerName }}</span>
              </div>
              <pre
                style="flex: 1; text-wrap: wrap"
                class="line-height-xl font-size-s"
              >{{ item.Summary }}</pre>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="要点回顾" name="review">
        <div
          v-if="activeName === 'review'"
          v-loading="summarization.QuestionsAnsweringSummary.length === 0"
        >
          <el-card
            v-for="(item, index) in summarization.QuestionsAnsweringSummary"
            :key="index"
            style="
              margin-bottom: 20px;
              background-color: var(--el-color-primary-light-9);
            "
            @click="setYdTime(item.SentenceIdsOfQuestion)"
          >
            <div style="display: flex; justify-content: space-between">
              <div
                style="
                  display: flex;
                  align-items: center;
                  flex-direction: column;
                  width: 50px;
                  font-size: 12px;
                  padding: 6px 8px 4px 0;
                "
              >
                <div
                  style="
                    padding: 2px 6px;
                    font-size: 12px;
                    letter-spacing: 0;
                    border-radius: 4px;
                    font-weight: 700;
                    color: var(--el-color-primary);
                    background-color: var(--el-color-primary-light-7);
                  "
                >
                  <em> 要点</em>
                </div>
              </div>
              <div style="flex: 1">
                <p style="color: var(--el-color-black)">{{ item.Question }}</p>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    margin-top: 10px;
                    color: var(--el-text-color-primary);
                  "
                >
                  <span class="line-height-xl font-size-s">{{ item.Answer }}</span>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="提取PPT" name="pick">
        <el-timeline
          style="width: 100%"
          v-if="activeName === 'pick'"
          v-loading="pptExtraction.length === 0"
        >
          <template v-for="(item, index) in pptExtraction" :key="index">
            <el-timeline-item
              v-if="item.Summary"
              :color="'#585a73'"
              :timestamp="millisecondsToTime(item.Start)"
              placement="top"
              @click="videoTimeChange(item.Start)"
            >
              <el-card
                style="background-color: var(--el-color-primary-light-9)"
              >
                <div style="width: 100%" class="ppt">
                  <el-image
                    style="width: 190px; height: 110px; cursor: zoom-in"
                    :src="item.FileUrl"
                    fit="cover"
                    @click.stop="() => {}"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="[item.FileUrl]"
                  ></el-image>
                  <div
                    class="hide-summary" :id="`hide-summary-${index}`"
                    v-html="item.Summary.replaceAll('\n', '<br />')"
                    v-resize="(e: TypeEvent) => setPptSummaryHeight(e, index)"
                  ></div>
                  <el-tooltip
                    v-if="pptSummaryHeight[index + ''] > 110"
                    effect="dark"
                    placement="left"
                  >
                    <template #content>
                      <div style="max-width: 500px" v-html="item.Summary.replaceAll('\n', '<br />')"></div>
                    </template>
                    <div
                      class="content line-height-xl font-size-s"
                      style="height: 110px; color: var(--el-text-color-primary)"
                      v-html="item.Summary.replaceAll('\n', '<br />')"
                    />
                  </el-tooltip>
                  <div
                    v-else
                    class="content line-height-xl font-size-s"
                    style="height: 110px; color: var(--el-text-color-primary)"
                    v-html="item.Summary.replaceAll('\n', '<br />')"
                  />
                </div>
              </el-card>
            </el-timeline-item>
          </template>
        </el-timeline>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const activeName = ref('overview')
import useCourseStore from '@/stores/course'
import { millisecondsToTime } from '@/utils/tools'
import { storeToRefs } from 'pinia'
import TextAvatar from '@/components/text-avatar/index.vue'

const pptSummaryHeight = ref({})
const courseStore = useCourseStore()
const {
  autoChapters,
  videodomRef,
  summarization,
  pptExtraction,
  audioSegments,
} = storeToRefs(courseStore)

const setYdTime = (ids: number[]) => {
  const id: number = ids[0] ? ids[0] - 1 : 0
  const start: number = audioSegments.value[id][0] ? audioSegments.value[id][0] : 0
  videoTimeChange(start)
}

const videoTimeChange = (milliseconds: number) => {
  videodomRef.value.currentTime = milliseconds / 1000
}

type TypeEvent = {
  width: number,
  height: number
}

const setPptSummaryHeight = (e: TypeEvent, index: number) => {
  pptSummaryHeight.value[index + ''] = e.height
}
</script>
<style lang="scss">
.course-d-tabs {
  .el-timeline {
    padding-left: 5px;
  }
}
</style>
<style lang="scss" scoped>
.ppt {
  display: flex;
  min-height: 40px;
  position: relative;

  .content {
    flex: 1;
    line-height: 22px;
    font-size: 12px;
    color: #999;
    padding-left: 12px;
    height: 110px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 5;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
  }

  .hide-summary {
    flex: 1;
    padding-left: 12px;
    line-height: 22px;
    font-size: 13px;
    position: absolute;
    right: 0;
    top: 0;
    height: auto;
    width: calc(100% - 190px);
    z-index: -1;
    color: transparent;
    opacity: 0;
  }
}
</style>
